<template>
  <div class="home">
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <h1 class="hero-title">悦而启思</h1>
        <p class="hero-subtitle">数字设计·创意定制</p>
        <div class="hero-tags">
          <span class="tag">网站设计</span>
          <span class="tag">APP 开发</span>
          <span class="tag">插画定制</span>
          <span class="tag">毕设指导</span>
        </div>
        <div class="hero-actions">
          <button class="btn-primary">
            <span>浏览作品</span>
            <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
              <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </button>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="services">
      <div class="services-header">
        <h2 class="services-title">我们的服务</h2>
        <p class="services-subtitle">Our Services</p>
      </div>

      <div class="services-grid">
        <div class="service-card">
          <div class="service-header">
            <div class="service-icon-container">
              <div class="service-icon">
                <img src="@/assets/images/fuwu-1.png" alt="" width="99px" height="115px">
              </div>
              <div class="service-line"></div>
            </div>
          </div>
          <div class="service-content">
            <h3 class="service-title">企业数字化设计</h3>
            <p class="service-description">为企业活动、产品发布定制专属设计方案，涵盖线上活动主视觉、产品页面设计等。</p>
          </div>

        </div>

        <div class="service-card">
          <div class="service-header">
            <div class="service-icon-container">
              <div class="service-icon">
                <img src="@/assets/images/fuwu-2.png" alt="" width="99px" height="115px">
              </div>
              <div class="service-line"></div>
            </div>
          </div>
          <div class="service-content">
            <h3 class="service-title">创意设计</h3>
            <p class="service-description">支持产品创新设计，通过脑洞大开的插画设计、logo设计，赋予商品独特竞争力。</p>
          </div>

        </div>

        <div class="service-card">
          <div class="service-header">
            <div class="service-icon-container">
              <div class="service-icon">
                <img src="@/assets/images/fuwu-3.png" alt="" width="99px" height="115px">
              </div>
              <div class="service-line"></div>
            </div>
          </div>
          <div class="service-content">
            <h3 class="service-title">交互动画</h3>
            <p class="service-description">为品牌营销定制交互式广告，通过滑动、点击触发的动态内容，吸引用户深度参与。</p>
          </div>

        </div>

        <div class="service-card">
          <div class="service-header">
            <div class="service-icon-container">
              <div class="service-icon">
                <img src="@/assets/images/fuwu-4.png" alt="" width="99px" height="115px">
              </div>
              <div class="service-line"></div>
            </div>
          </div>
          <div class="service-content">
            <h3 class="service-title">个人学习</h3>
            <p class="service-description">为学生群体提供课程学习辅导设计，涵盖海报、产品界面等，助力完成高质量设计成果。</p>
          </div>

        </div>

        <div class="service-card">
          <div class="service-header">
            <div class="service-icon-container">
              <div class="service-icon">
                <img src="@/assets/images/fuwu-5.png" alt="" width="99px" height="115px">
              </div>
              <div class="service-line"></div>
            </div>
          </div>
          <div class="service-content">
            <h3 class="service-title">LOGO设计</h3>
            <p class="service-description">设计业务包含商品logo、小程序logo、网页logo、商标logo。</p>
          </div>

        </div>

        <div class="service-card">
          <div class="service-header">
            <div class="service-icon-container">
              <div class="service-icon">
                <img src="@/assets/images/fuwu-6.png" alt="" width="99px" height="115px">
              </div>
              <div class="service-line"></div>
            </div>
          </div>
          <div class="service-content">
            <h3 class="service-title">平面设计</h3>
            <p class="service-description">助力完成品牌视觉全案，从宣传海报、产品包装到画册折页，塑造统一且吸睛的传播形象。</p>
          </div>

        </div>
      </div>
    </section>

    <!-- Latest Works Section -->
    <section class="latest-works">
      <div class="works-header">
        <h2 class="works-title">最新设计案例</h2>
        <p class="works-subtitle">Latest design examples</p>
        <div class="works-tags">
          <span class="work-tag">网站设计</span>
          <span class="work-tag">APP 开发</span>
          <span class="work-tag">插画定制</span>
          <span class="work-tag">毕设指导</span>
        </div>
      </div>

      <div class="works-container">
        <div class="works-grid">
          <div class="work-card">
            <div class="work-image">
              <img src="@/assets/images/demo.webp" alt="科技公司官网设计" class="work-img" />
            </div>
            <div class="work-info">
              <h3>科技公司官网设计</h3>
              <p>UI/UX 设计</p>
            </div>
          </div>

          <div class="work-card">
            <div class="work-image">
              <img src="@/assets/images/demo.webp" alt="智能家居 APP 设计" class="work-img" />
            </div>
            <div class="work-info">
              <h3>智能家居 APP 设计</h3>
              <p>UI/UX 设计</p>
            </div>
          </div>

          <div class="work-card">
            <div class="work-image">
              <img src="@/assets/images/demo.webp" alt="品牌形象设计" class="work-img" />
            </div>
            <div class="work-info">
              <h3>品牌形象设计</h3>
              <p>UI/UX 设计</p>
            </div>
          </div>

          <div class="work-card">
            <div class="work-image">
              <img src="@/assets/images/demo.webp" alt="医疗小程序设计" class="work-img" />
            </div>
            <div class="work-info">
              <h3>医疗小程序设计</h3>
              <p>UI/UX 设计</p>
            </div>
          </div>
        </div>

        <div class="works-action">
          <button class="btn-view-all">
            <span>查看全部作品</span>
          </button>
          <button class="btn-browse">
            <span>浏览作品</span>
            <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
              <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </button>
        </div>
      </div>
    </section>

    <!-- Design Philosophy Section -->
    <section class="philosophy">
      <div class="philosophy-content">
        <h2 class="philosophy-title">设计理念</h2>
        <p class="philosophy-subtitle">Design concept</p>
        <p class="philosophy-description">
          我们相信好的设计不仅仅是美观，更是解决问题的工具。通过深入理解用户需求和商业目标，
          我们创造出既有视觉冲击力又具备实用价值的设计作品。每一个项目都是我们对完美的追求，
          每一次合作都是我们与客户共同成长的机会。
        </p>
        <button class="philosophy-btn">
          <span>了解更多</span>
          <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
            <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HomePage',
});
</script>

<style lang="scss" scoped src="./Home.scss"></style>